<template>
	<view class="lifet_clock">
		<view class="life_title">命时</view>
		<view class="life_one">小时候，我们以为自己不会老去</view>
		<view class="input_tip">你出生于</view>
		<view @click="handleShowPicker" class="picker_btn">选择日期</view>
		<u-picker v-model="isShowPicker" mode="time" @confirm="handleOk"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		setBirthTime
	} from '../../../pages/Time/utils.js'
	export default {
		data() {
			return {
				isShowPicker: false
			}
		},
		methods: {
			handleShowPicker() {
				this.isShowPicker = true
			},
			handleOk({
				timestamp,
				year
			}) {
				const now = new Date();
				let errText = ""
				timestamp = timestamp * 1000; //毫秒转秒
				if (year - now.getFullYear() > 170) {
					errText = "您不会是仙人吧！"
				} else if (now.getTime() < timestamp) {
					errText = "您还没出生呢？"
				}
				if (errText) {
					this.$refs.uToast.show({
						title: errText,
						type: 'warning',
						duration: '2000',
					})
					return false;
				}
				setBirthTime(timestamp).then(res => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}
	.life_title {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.life_one {
		text-align: center;
		line-height: 50rpx;
	}

	.lifet_clock {
		.input_tip {
			width: 50rpx;
			font-size: 40rpx;
			text-align: center;
			margin: 100rpx auto 0;
			line-height: 80rpx;
		}

		.life_title {
			font-size: 50rpx;
		}

		.life_one {
			font-size: 38rpx;
			line-height: 80rpx;
			color: #aaa;
		}

		.picker_btn {
			font-size: 34rpx;
			letter-spacing: 6rpx;
			width: 190rpx;
			line-height: 70rpx;
			text-align: center;
			border: 2rpx solid $uni-text-color-grey;
			margin: 0 auto;
			margin-top: 250rpx;
			animation-timing-function: ease-in-out;
			animation-name: breathe;
			animation-duration: 2700ms;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
	}

	@keyframes breathe {
		0% {
			opacity: .3;
			box-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.1);
		}

		100% {
			opacity: 1;
			border: 2rpx solid $uni-text-color-grey;
			box-shadow: 0 1rpx 30rpx rgba(168, 168, 168, 0.4);
		}
	}
</style>
